<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/lib/jquery.min.js"></script>
    <link rel="stylesheet" href="fonts/iconfont.css">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet/less" type="text/css" href="css/xStyle.less"/>
    <script type="text/javascript" src="js/lib/less.js"></script>
    <style>
        h1 {
            margin: 2rem;
        }
    </style>
</head>

<body>
<div>

    <div>
        <div>
            <div id='div1'></div>
        </div>
    </div>

    <div>
        <div>
            <div id='div2'></div>
        </div>
        <div>          
            <div id="json2">

            </div>
        </div>
    </div>

</div>
</body>
<script type="module">
   
       import xViewModal from './js/src/xViewModal.js';
    
    let obj ={code:'1001',name:'苹果',img:'img/apple1.jpg,img/apple2.jpg,img/apple3.jpg',
      desc:'   苹果不但外形漂亮，味道香甜，作用也很多。儿童经常吃苹果，可以促进大脑发育，增强记忆力。\n这是因为苹果不仅富有大脑所需的营养成分，而且含有有益于儿童生长发育的纤维和能增强记忆的锌。'};
    
    let cfg ={
    	style:"modal-lg",
 
    	grid:'container',
    	tag:true,
    	data:[{label:'编号:',$data:'code',col:'col-md-4',tag:'基本信息'},
    	{label:'名称:',$data:'name',col:'col-md-4',tag:'基本信息'},
    	{label:'图片:',$data:'img',type:'image',col:'col-md-12',tag:'附加信息'},
    	{label:'描叙:',$data:'desc',type:'text',col:'col-md-12',tag:'附加信息'}]
    }
    
   let p = new xViewModal(cfg);
   p.show(obj);
   


</script>

</html>